<template>
  <el-header>
    <el-row>
      <el-col :span="3"
        ><div class="grid-content logo" align="left">
          <img src="@/assets/logo1.png" width="100px" height="100px" /></div
      ></el-col>

      <el-col :span="3"
        ><div class="grid-content">
          <router-link to="/welcomepage">首页</router-link>
        </div></el-col
      >
      <el-col :span="3"
        ><div class="grid-content">
          <router-link to="/shop">商城</router-link>
        </div></el-col
      >
      <el-col :span="3"><div class="grid-content"><router-link to="/create_center"
                  >创作中心</router-link
                ></div></el-col>
      <el-col :span="3"><div class="grid-content"><router-link to="/help"
                  >帮助文档</router-link
                ></div></el-col>
      <el-col :span="5"
        ><div class="grid-content">
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="input2"
          >
          </el-input></div
      ></el-col>
      <el-col :span="2" 
        ><el-badge is-dot class="item">
          <i @click="turntosysinfo()" 
          class="el-icon-message-solid"
          style="font-size: 30px; color: rgb(255, 227, 0)"
        ></i
      >
          </el-badge></el-col>
      <el-col :span="2"
        ><div class="grid-content" align="left">
          <el-dropdown class="avatar" trigger="hover">
            <span class="el-dropdown-link">
              <img
                src="@/assets/portrait1.png"
                style="width: 35px; height: 35px; border-radius: 50%"
              />
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="usemessage">
                <router-link to="/personal_mainpage"
                  >个人中心</router-link
                ></el-dropdown-item>
              <el-dropdown-item
                ><router-link to="/create_center"
                  >发布数字藏品</router-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div></el-col
      >
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: "Header",
  methods:{
    turntosysinfo(){
            this.$router.push("/systeminfo_page/")
        },
  }
};
</script>

<style scoped>
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
  position:fixed;
  z-index:999;
  top:0;
  width: 102%;
  height: 80px;
  left: 0;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.logo{
  position: relative;
  top:-20px;
  left: 10%;
}
/*取消链接下划线和颜色*/
a {
  text-decoration: none;
  color: #333;
}
.router-link-active {
  text-decoration: none;
  color: #333;
}
.item{
  height: 40px;
  position:relative;
  top:40%;
}
.avatar{
  position: relative;
  top:10px;
}
</style>